<template>
	<div>
		<!--		    没有上传过头像就上传一个-->
		<el-avatar shape="square" :size="200" fit="contain" :src="option.img"></el-avatar>
		<el-button class="el-button-avatar" @click="dialogVisible = true" type="primary">更换头像</el-button>

		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="30%"
		>
			<div class="cropper">
				<div class="left">
					<vueCropper
						ref="cropper"
						:img="option.img"
						:outputSize="option.size"
						:outputType="option.outputType"
						:info="option.info"
						:full="option.full"
						:canMove="option.canMove"
						:canMoveBox="option.canMoveBox"
						:original="option.original"
						:autoCrop="option.autoCrop"
						:autoCropWidth="option.autoCropWidth"
						:autoCropHeight="option.autoCropHeight"
						:fixedBox="option.fixedBox"
						@realTime="realTime"
					></vueCropper>
					<input type="file" hidden ref="upload" @change="uploadAvatar">
				</div>

				<div class="previewBox">
					<div :style="preview.div" class="preview">
						<img :src="preview.url" :style="preview.img">
					</div>
					<el-button class="upload-btn" type="primary" @click="$refs['upload'].click()">上传头像</el-button>
					<el-button class="upload-btn" type="primary" @click="confirmUpload">确认上传</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
	name: 'avatar',
	created () {
		this.userinfo = JSON.parse(localStorage.getItem('USERINFO'))
		if (this.userinfo.avatar) {
			this.option.img = 'http://localhost:5862/public/images/' + this.userinfo.avatar
		} else {
			this.option.img = require('@/assets/default-avatar.png')
		}
	},
	components: {
		VueCropper
	},
	data () {
		return {
			dialogVisible: false,
			defaultAvatar: require('@/assets/default-avatar.png'),
			userinfo: {},
			option: {
				img: '', // 裁剪图片的地址
				info: true, // 裁剪框的大小信息
				outputSize: 1, // 剪切后的图片质量（0.1-1）
				full: true, // 输出原图比例截图 props名full
				outputType: 'png', // 裁剪生成额图片的格式
				canMove: true,  // 能否拖动图片
				original: false,  // 上传图片是否显示原始宽高
				canMoveBox: true,  // 能否拖动截图框
				autoCrop: true, // 是否默认生成截图框
				autoCropWidth: 150,
				autoCropHeight: 150,
				fixedBox: true // 截图框固定大小
			},
			preview: {},
		}
	},
	methods: {
		uploadAvatar () {
			const file = this.$refs['upload'].files[0]
			const reader = new FileReader()
			reader.readAsDataURL(file)
			reader.onload = e => {
				this.option.img = e.target.result
			}
		},
		realTime (data) {
			this.preview = data
		},
		async confirmUpload () {
			const file = this.$refs['upload'].files
			if (file.length === 0) {
				return this.msg({
					type: 'error',
					message: '请选择头像'
				})
			}
			const fd = new FormData()
			fd.append('avatar', file[0])
			const { data } = await this.http({
				method: 'post',
				url: '/admin/avatar',
				data: fd
			})
			if (data.errno !== 0) {
				return this.msg({
					type: 'error',
					message: '更新用户头像失败'
				})
			}
			this.msg({
				type: 'success',
				message: '更新用户头像成功',
				onClose: async () => {
					const { data } = await this.http({
						method: 'get',
						url: '/admin/userinfo'
					})
					localStorage.setItem('USERINFO', JSON.stringify(data.data))
					this.dialogVisible = false
					location.reload()
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.el-avatar {
	display: block;
	margin-bottom: 10px;
}

.el-button-avatar {
	width: 200px;
}

.previewBox {
	text-align: center;
	margin-left: 60px;
}

.preview {
	border-radius: 50%;
	border: 1px solid #ccc;
	background-color: #ccc;
	overflow: hidden;
}

.cropper {
	height: 300px;

	.left {
		float: left;
		width: 300px;
		height: 300px;
	}

	.previewBox {
		float: left;

		.preview {
			margin-bottom: 10px;
		}

		.upload-btn {
			display: block;
			width: 150px;
			margin-bottom: 10px;
		}
	}
}
</style>
